<!DOCTYPE HTML>
<html lang="zxx">
<head>
<title>登录</title>
<!-- Meta tag Keywords -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="UTF-8" />
<meta name="keywords" content="" />
<link rel="stylesheet" href="static/css/style.css" type="text/css" media="all" />
<link href="static/css/font-awesome.min.css" rel="stylesheet">
<script type="text/javascript" src="../lib/loading/okLoading.js"></script>
<style>
.forget .tit {
	padding-top: 15px;
	text-align: center;
	font-size: 18px;
}
.forget .code-box {
	display: flex;
}
.forget .code-box .btn-auth-code {
	margin-left: 10px;
}
.reset-password-form {
	display: none;
}
</style>
</head>

<body>
<div class="main-bg" id="mian"> 
  <!-- title -->
  <h1>徽翼签会员登录</h1>
  <!-- //title -->
  <div class="sub-main-w3"> 
    <!-- vertical tabs -->
    <div class="vertical-tab">
      <div id="section1" class="section-w3ls">
        <input type="radio" name="sections" id="option1" checked>
        <label for="option1" class="icon-left-w3pvt"><span class="fa fa-user-circle" aria-hidden="true"></span>重置密码</label>
        <article>
          <div class="page-fill forget" id="login">
            <form class="layui-form verify-user-form">
              <div class="legend last">忘记密码</div>
              <div class="input">
                <span aria-hidden="true" class="fa fa-user-o"></span>
                <input type="text" class="layui-input" id="username" name="username" placeholder="请输入账号" autocomplete="off" lay-verify="required">
              </div>
              <div class="input">
                <span aria-hidden="true" class="fa fa-phone"></span>
                <input type="text" class="layui-input" id="phone" name="text" placeholder="请输入手机号码" autocomplete="off" lay-verify="required|phone" maxlength="11">
              </div>
              <div class="input">
                <span aria-hidden="true" class="fa fa-key"></span>
                <input type="text" class="layui-input" id="captcha" name="captcha" placeholder="请输入验证码" autocomplete="off" lay-verify="required" maxlength="4">
                <button type="button" class="layui-btn btn-auth-code submit">获取验证码</button>
              </div>
              <button class="btn submit" lay-filter="verifyUser" lay-submit="">提 交</button>
              <div class="login-link"> <a href="login.html" style="font-size: 12px;padding-top: 10px;display: block;color: #666;">再去登录试试</a> </div>
            </form>
            <form class="layui-form reset-password-form">
              <div class="legend last">设置密码</div>
              <div class="input">
                <span aria-hidden="true" class="fa fa-key"></span>
                <input type="password" class="layui-input" id="password" name="password" placeholder="请输入密码" autocomplete="off" lay-verify="required|password">
              </div>
              <div class="input">
                <span aria-hidden="true" class="fa fa-key"></span>
                <input type="password" class="layui-input" id="comPassword" name="password" placeholder="请确认密码" autocomplete="off" lay-verify="required|comPassword">
              </div>
              <div class="layui-form-item">
                <button class="btn submit" lay-filter="resetPassword" lay-submit="">确定设置</button>
              </div>
            </form>
          </div>
        </article>
      </div>
    </div>
    <!-- //vertical tabs --> 
  </div>
</div>

<!--js逻辑--> 
<script src="../lib/layui/layui.js"></script> 
<script>
        layui.use(["form", "okLayer", "okUtils"], function () {
            let $ = layui.jquery;
            let form = layui.form;
            let okLayer = layui.okLayer;
            let okUtils = layui.okUtils;
            let phoneRegex = /^[1][0-9]{10}$/;
            let timer = "";
            let intervalTime = 60;

            okLoading.close($);

            /**
             * 数据校验
             */
            form.verify({
                phone: [phoneRegex, "手机号格式不正确"],
                password: [/^[\S]{6,12}$/, "密码必须6到12位，且不能出现空格"],
                comPassword: function (val) {
                    let password = $("#password").val();
                    return password == val ? "" : "两次密码不一致";
                }
            });

            /**
             * 提交表单
             */
            form.on("submit(verifyUser)", function (data) {
                okUtils.ajax("/verifyUser", "post", data.field, true).done(function (response) {
                    okLayer.greenTickMsg(response.msg, function () {
                        // 样式修改
                        $('.btn-auth-code').removeClass("layui-btn-disabled");
                        $('.btn-auth-code').text("重新获取");
                        // 重置定时器
                        clearInterval(timer);
                        timer = "";
                        intervalTime = 60;
                        // 显示重置密码表单
                        $(".verify-user-form, .reset-password-form").toggle();
                    });
                }).fail(function (error) {
                    console.log(error)
                });
                return false;
            });

            /**
             * 获取验证码
             */
            $('.btn-auth-code').click(function () {
                let _this = $(this);
                if (_this.hasClass("layui-btn-disabled")) {
                    return;
                }
                let phone = $("#phone").val();
                if (phoneRegex.test(phone)) {
                    _this.addClass("layui-btn-disabled");
                    _this.text(intervalTime + "秒后获取");
                    // 按钮操作定时器
                    timer = setInterval(function () {
                        intervalTime--;
                        if (intervalTime < 1) {
                            clearInterval(timer);
                            _this.removeClass("layui-btn-disabled");
                            _this.text("重新获取");
                            intervalTime = 60;
                        } else {
                            _this.text(intervalTime + "秒后获取");
                        }
                    }, 1000);

                    // 发送手机验证码
                    okUtils.ajax("/sendCaptcha", "post", null, true).done(function (response) {
                        okLayer.greenTickMsg(response.msg);
                    }).fail(function (error) {
                        console.log(error)
                    });
                } else {
                    layer.msg("手机号码格式不正确", {icon: "5", anim: "6"});
                    $("#phone").focus();
                }
            });

            /**
             * 重置密码
             */
            form.on("submit(resetPassword)", function (data) {
                okUtils.ajax("/resetPassword", "post", data.field, true).done(function (response) {
                    okLayer.greenTickMsg(response.msg, function () {
                        window.location = "login.html";
                    });
                }).fail(function (error) {
                    console.log(error)
                });
                return false;
            });

            /**
             * 表单input组件单击时
             */
            $("#login .input-item .layui-input").click(function (e) {
                e.stopPropagation();
                $(this).addClass("layui-input-focus").find(".layui-input").focus();
            });

            /**
             * 表单input组件获取焦点时
             */
            $("#login .layui-form-item .layui-input").focus(function () {
                $(this).parent().addClass("layui-input-focus");
            });

            /**
             * 表单input组件失去焦点时
             */
            $("#login .layui-form-item .layui-input").blur(function () {
                $(this).parent().removeClass("layui-input-focus");
                if ($(this).val() != "") {
                    $(this).parent().addClass("layui-input-active");
                } else {
                    $(this).parent().removeClass("layui-input-active");
                }
            });
        });
    </script>
</body>
</body>
</html>
